<template>
  <div class="evaluate container">
    <navigate>自我测评</navigate>
    <div v-if="currentTab == 1" class="container_main flex_row">
      <van-sidebar v-model="sideCurrent">
        <template v-for="(item, index) in sideList">
          <van-sidebar-item
            @click="selectSide(item.id)"
            :title="item.name"
            :key="index"
          />
        </template>
      </van-sidebar>

      <div class="list flex_column">
        <div
          v-for="(item, index) in evaluateList"
          :key="index"
          class="item flex_row flex_align_center"
        >
          <img :src="item.cover" alt="" class="avatar" />
          <div class="info flex_column">
            <div class="name">{{ item.name }}</div>
            <div class="evaluation_data">
              <img
                src="@/assets/images/function/hot_icon.png"
                alt=""
                class="hot_img"
              />
              <span>{{ item.evaluation_num }}人测过</span>
            </div>
            <!-- <div class="deadline">
              <img src="@/assets/images/common/clock.png" alt="" />
              剩余次数：{{ item.remaining_test_count }}次
            </div> -->
            <div class="info_bottom flex_row between">
              <!-- <div class="charge">
                <div class="text">测评收费</div>
                <div class="sum">￥{{ item.interpret_price }}元/次</div>
              </div> -->
              <button class="btn nowrap" @click="startEvaluate(item, 1)">
                {{ item.is_temp_record > 0 ? "继续测评" : "开始测评" }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="container_mian team">
      <div class="item" v-for="item in teamList" :key="item.id">
        <div class="name">任务名：{{ item.task_name }}</div>
        <div class="task_info flex_row father_relative">
          <img :src="joinUrlImg(item.icon_url)" alt="" class="image" />
          <div class="info flex_column">
            <div class="name">{{ item.name }}</div>
            <div class="deadline">
              剩余期限：
              {{
                item.is_time == 1
                  ? getDay(item.end_time, item.start_time) + "天"
                  : "无限"
              }}
            </div>
            <div class="progress_bar">
              <div
                :style="{
                  width:
                    fill(item.task_user_finish_count, item.task_users_count) +
                    '%',
                  backgroundColor: '#00AEFF',
                }"
                class="fill"
              ></div>
            </div>
          </div>
          <button
            :disabled="
              calcCurrentTargetTime(
                new Date().valueOf() / 1000,
                item.end_time
              ) < 0
            "
            :class="[
              'btn',
              {
                disabled:
                  calcCurrentTargetTime(
                    new Date().valueOf() / 1000,
                    item.end_time
                  ) < 0,
              },
              'nowrap',
            ]"
            @click="startEvaluate(item, 2)"
          >
            {{ "开始测评" }}
          </button>
        </div>

        <div class="row completeness">
          已有{{
            fill(item.task_user_finish_count, item.task_users_count)
          }}%的用户完成了任务
        </div>
        <div class="time_title row">任务起止时间：</div>
        <div class="row start_end_time flex_row flex_align_center">
          <div class="start_time">{{ formatDate(item.start_time * 1000) }}</div>
          <span>--</span>
          <div class="end_time">{{ formatDate(item.end_time * 1000) }}</div>
        </div>
        <div class="flex_row footer between">
          <!-- 发布人 -->
          <div class="publish_person">发布人：{{ item.create_username }}</div>
          <!-- 完成人数 -->
          <div class="success">
            完成人数：{{
              item.task_user_finish_count + "/" + item.task_users_count
            }}
          </div>
          <!-- 收费 -->
          <!-- <div class="sum">收费：{{ "￥0元/次" }}</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryTypeNav, queryRatingScaleInfo } from "@/api/evaluation/index";

import { getDay, calcCurrentTargetTime } from "@/utils/time.js";
import { mapState } from "vuex";
import { joinUrlImg } from "@/utils/setUrlImg";
export default {
  data() {
    return {
      // tab栏的高亮
      currentTab: 1,
      // 侧边栏高亮
      sideCurrent: 0,
      // 侧边栏分类列表
      sideList: [],
      // 当前选择的分类信息
      currentTypeInfo: {},
      // 测评列表
      evaluateList: [],
      // 团体列表
      teamList: [],
      // 测评设置
      setting: {},
      pageSize: 10,
      page: 1,
    };
  },
  created() {
    this.getTypeNav();
  },
  computed: {
    ...mapState(["INFO"]),
    // 计算进度条
    fill() {
      return (num, total) => {
        let result = ((num / total) * 100).toFixed(0);
        return result;
      };
    },
  },
  methods: {
    joinUrlImg,
    calcCurrentTargetTime,
    getDay,
    // 获取类型导航
    async getTypeNav() {
      let res = await queryTypeNav();
      if (res.code == 200) {
        this.sideList = res.data;
        this.getRatingScaleList(this.sideList[0].id);
      }
    },
    selectSide(id) {
      this.getRatingScaleList(id);
    },
    //获取列表
    async getRatingScaleList(id) {
      let par = {
        type_id: id,
        pageSize: this.pageSize,
        page: this.page,
      };
      let res = await queryRatingScaleInfo(par);
      this.evaluateList = res.data.data;
    },
    // 开始测评
    startEvaluate(item) {
      this.$router.push(`/normalAnswer?id=${item.id}&type=selfEvaluation&name=${item.name}`);
    },
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>
